<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dialog {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dialog form {
            width: 400px;
            background-color: white;

        }
    </style>
</head>

<body>
    <div>hello</div>
    <button id="regBtn">注册</button>
    <div style="display: none;" class="dialog" id="addDialog">
        <form name="form1">
            <fieldset>
                <legend>注册</legend>
                <p>
                    用户名 <input type="text" name="username">
                </p>
                <p>
                    邮箱 <input type="text" name="email">
                </p>
                <p>
                    性别
                    <input type="radio" name="gender" value="boy" checked> 男
                    <input type="radio" name="gender" value="gril"> 女
                </p>
                <p>
                    爱好
                    <input type="checkbox" name="hobbys" value="css">CSS
                    <input type="checkbox" name="hobbys" value="html">HTML
                    <input type="checkbox" name="hobbys" value="js">JS
                    <input type="checkbox" name="hobbys" value="vue">VUE
                </p>
                <p>
                    城市
                    <select name="city">
                        <option value="">请选择</option>
                        <option value="nj">南京</option>
                        <option value="sh">上海</option>
                        <option value="wx">无锡</option>
                        <option value="sz">苏州</option>
                    </select>
                </p>
                <p>
                    照片
                    <input type="file" name="avatar">
                </p>
                <p>
                    <button type="button" name="submitBtn">提交</button>
                    <button type="button" name="cancelBtn">取消</button>
                </p>
            </fieldset>
        </form>
    </div>
    <script>
        const formData = {};
        document.form1.oninput = function (e) {
            const target = e.target;
            if (target.name === 'username') {
                formData[target.name] = target.value
            }
            if (target.name === 'email') {

                formData[target.name] = target.value

            }

            if (target.name === 'gender') {
                formData[target.name] = target.value

            }

            if (target.name === 'hobbys') {
                formData[target.name] = [...target.form.hobbys].reduce((r, el) => {
                    if (el.checked) r.push(el.value);
                    return r;
                }, []);
            }

            if (target.name === 'city') {
                formData[target.name] = target.value
            }
        }

        document.form1.submitBtn.onclick = function () {
            // console.log(formData);
            // 表单数据对象
            const fd = new FormData(document.form1);
            console.log(fd);
            console.log([...fd.entries()]);
            console.log(Object.fromEntries(fd.entries()))
            console.log(fd.getAll('hobbys'));
        }

        regBtn.onclick = function () {
            addDialog.style.display = '';
        }
        document.form1.cancelBtn.onclick = function () {
            addDialog.style.display = 'none';
        }

    </script>
</body>

</html>